<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2025/10/15
  Time: 15:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>资源详情</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/back-index.css" />
    <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .my-video {
            margin: 30px auto auto auto;

        }
        .bgColor {
            background: black;
        }
        .padding-0 {
            padding: 0 0 !important;
        }

    </style>

    <script type="text/javascript" >
        $(function(){
            //返回资源列表
            $("#back").on('click', function(){
                $('#frame-id', window.parent.document).attr('src', '${pageContext.request.contextPath}/resource/findByParams');
            });

            // 下载文件
            $("#downloadBtn").on('click', function(){
                var resourceId = "${resource.id}";
                window.location.href = "${pageContext.request.contextPath}/resource/download?id=" + resourceId;
            });
        });
    </script>
</head>

<body>
<div class="panel panel-default" id="userSet">
    <div class="panel-heading">
        <h3 class="panel-title">资源详情</h3>
    </div>
    <div>
        <input type="button" value="返回资源列表" class="btn btn-success" id="back" style="margin: 5px 15px 5px 0px;float: right;" />
    </div>
    <div style="margin-top: 40px;">
        <c:choose>
            <c:when test="${resource.fileType == 'mp4' || resource.fileType == 'avi' || resource.fileType == 'mov'}">
                <!-- 视频文件显示播放器 -->
                <div class="container-fluid padding-0 bgColor">
                    <video style="width: 100%; height:470px;" controls="controls">
                        <source src="${pageContext.request.contextPath}${resource.path}" type="video/mp4">
                        您的浏览器不支持视频播放。
                    </video>
                </div>
            </c:when>
            <c:otherwise>
                <!-- 非视频文件显示下载按钮和文件信息 -->
                <div class="text-center">
                    <div class="alert alert-info">
                        <h4>该文件类型为: ${resource.fileType}</h4>
                        <p>请下载后查看文件内容</p>
                    </div>
                    <div class="download-btn">
                        <button id="downloadBtn" class="btn btn-primary btn-lg">
                            <span class="glyphicon glyphicon-download-alt"></span>
                            下载文件
                        </button>
                    </div>
                    <div class="file-preview">
                        <c:choose>
                            <c:when test="${resource.fileType == 'pdf'}">
                                <span class="glyphicon glyphicon-file" style="font-size: 100px; color: #d9534f;"></span>
                                <p>PDF文档</p>
                            </c:when>
                            <c:when test="${resource.fileType == 'doc' || resource.fileType == 'docx'}">
                                <span class="glyphicon glyphicon-file" style="font-size: 100px; color: #2b579a;"></span>
                                <p>Word文档</p>
                            </c:when>
                            <c:when test="${resource.fileType == 'zip' || resource.fileType == 'rar'}">
                                <span class="glyphicon glyphicon-compressed" style="font-size: 100px; color: #f0ad4e;"></span>
                                <p>压缩文件</p>
                            </c:when>
                            <c:otherwise>
                                <span class="glyphicon glyphicon-file" style="font-size: 100px; color: #5cb85c;"></span>
                                <p>${resource.fileType} 文件</p>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </c:otherwise>
        </c:choose>
    </div>
</div>
</body>
</html>